'use client';

import { Moon, Sun } from 'lucide-react';
import { useTheme } from 'next-themes';
import { useEffect, useState } from 'react';
import { cn } from '@/lib/utils';

/**
 * ThemeToggle - Light/Dark mode toggle button
 * 
 * Features:
 * - Smooth icon transition
 * - Glass morphism style
 * - System preference detection
 * - Persistent theme storage
 */
export default function ThemeToggle({ className }: { className?: string }) {
  const [mounted, setMounted] = useState(false);
  const { theme, setTheme } = useTheme();

  useEffect(() => {
    setMounted(true);
  }, []);

  if (!mounted) {
    return (
      <button
        className={cn(
          'glass p-2 rounded-lg',
          'hover:bg-gray-200/50 dark:hover:bg-white/20 transition-all duration-300',
          className
        )}
        aria-label="Toggle theme"
      >
        <Sun className="h-5 w-5 text-gray-700 dark:text-white/80" />
      </button>
    );
  }

  return (
    <button
      onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
      className={cn(
        'glass p-2 rounded-lg',
        'hover:bg-gray-200/50 dark:hover:bg-white/20 transition-all duration-300',
        'active:scale-95',
        className
      )}
      aria-label="Toggle theme"
    >
      {theme === 'dark' ? (
        <Sun className="h-5 w-5 text-white/80 transition-transform duration-300 rotate-0 hover:rotate-12" />
      ) : (
        <Moon className="h-5 w-5 text-gray-700 transition-transform duration-300 rotate-0 hover:-rotate-12" />
      )}
    </button>
  );
}

